<template>
  <el-checkbox-group :value="value" @input="handleChange">
    <el-checkbox v-for="option in options" :key="option.value" :label="option.value" :disabled="disabled && !value.includes(option.value)">{{ option.label }}</el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number, Array],
      required: true
    },
    options: {
      type: [Array],
      default: () => {
        return [
          {
            label: '物理',
            value: '物理'
          },
          {
            label: '化学',
            value: '化学'
          },
          {
            label: '生物',
            value: '生物'
          },
          {
            label: '技术',
            value: '技术'
          },
          {
            label: '历史',
            value: '历史'
          },
          {
            label: '政治',
            value: '政治'
          },
          {
            label: '地理',
            value: '地理'
          }
        ]
      }
    }
  },
  data() {
    return {
      radio: this.options[0].value
    }
  },
  computed: {
    disabled() {
      return this.value.length >= 3
    }
  },
  methods: {
    handleChange(val) {
      this.$emit('input', val)
    }
  }
}
</script>
